<template>
  <div class="about">
    <el-container>
      <el-header>
        <h1>关于我们</h1>
      </el-header>
      <el-main>
        <el-card>
          <h2>项目信息</h2>
          <p>AI博客项目 - 前后端分离架构</p>
          <el-button type="primary" @click="goHome">返回首页</el-button>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

/**
 * 返回首页
 */
const goHome = () => {
  router.push('/')
}
</script>

<style scoped>
.about {
  height: 100vh;
}

.el-header {
  background-color: #67c23a;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-main {
  padding: 20px;
}
</style>